<template>
  <el-dialog width="60%" :title="title" :close-on-click-modal="false" :visible.sync="visible" top="5vh">
    <h3>盘点信息</h3>
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
      label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="盘点名称" prop="name">
            <el-input v-model="dataForm.name" placeholder="盘点名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="仓库" prop="stockHouseId">
            <el-select v-model="dataForm.stockHouseId" placeholder="请选择仓库" clearable style="width: 100%" disabled>
              <el-option v-for="(item,index) in stockHouse" :key="index"
                :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="盘点日期" prop="inventoryDate">
            <el-date-picker v-model="dataForm.inventoryDate" style="width: 100%" value-format="yyyy-MM-dd"
              type="date"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="盘点人：" prop="inventoryUser">
            <el-input v-model="dataForm.inventoryUser" placeholder="盘点人" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="dataForm.remark" placeholder="备注" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <h3>货品信息</h3>
    <el-table :data="dataForm.inventoryListDetails" style="margin-top:20px" height="300">
      <el-table-column prop="goodsName" label="商品名称" width="500" align="center"/>
      <el-table-column prop="unit" label="单位" align="center"/>
      <el-table-column prop="expectQuantity" label="预期数量" align="center"/>
      <el-table-column label="点出数量" prop="realQuantity" align="center">
        <template slot-scope="scope">
          <el-input type="number" v-model="scope.row.realQuantity" min="0" @input="onInput"/>
        </template>
      </el-table-column>
      
      <el-table-column prop="profitOrLoss" label="盘盈盘亏" align="center">
        <template slot-scope="scope">
          <div>
            <span class="points ying" v-if="scope.row.realQuantity - scope.row.expectQuantity>0">盘盈</span>
            <span class="points kui" v-else-if="scope.row.realQuantity - scope.row.expectQuantity<0">盘亏</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="盈亏数量" align="center">
        <template slot-scope="scope">
          {{scope.row.realQuantity - scope.row.expectQuantity}}
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>

  import {
    add
  } from "@/api/business/stock/inventory";
  import {
    page as getStock
  } from "@/api/business/stock/stock";
  import {formatDate} from "@/utils/index"
import { mapState } from 'vuex';
  export default {
    computed:{
      ...mapState({
          sysUser: state => state.user.sysUser,
        })
    },
    data() {
      return {
        selectedOptions: [],
        title: '新增盘点',
        visible: false,
        stockHouse:[{
          value:'d9c7f6765c924dffbd4771b7c2e31785',
          label:'北方仓库'
        }],
        dataForm: {},
        dataRule: {
          name: [{
            required: true,
            message: '盘点名称不能为空',
            trigger: 'blur'
          }],
          
        }
      }
    },
    methods: {
      onInput(e){
        // this.$forceUpdate()
        console.log('sss',this.dataForm.inventoryListDetails)
      },
      init(record) {
        this.visible = true
        this.dataForm = {
          name:'',
          stockHouseId:'d9c7f6765c924dffbd4771b7c2e31785',
          inventoryDate:formatDate(),
          inventoryUser:'管理员',
          inventoryListDetails:[]
        }
        getStock({
          search:{
            stockHouseId:this.sysUser.agentId
          },
          pageSize:11000,
          pageNum:1
          
        }).then(res=>{
          var list = res.data.list;
          for(var i = 0;i<list.length;i++){
            list[i].expectQuantity = list[i].quantity
            list[i].realQuantity = list[i].quantity
          }
          this.dataForm.inventoryListDetails = list
        })
      },

      // 表单提交
      dataFormSubmit() {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            add(this.dataForm).then(res => {
              this.visible = false
              this.$modal.msgSuccess(this.title + "成功");
              this.$emit('refreshDataList')
            })
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
.points{
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;

  &::before{
    display: block;
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 5px;
  }
}
.ying{
  &::before{
    background: #52c41a;
  }
}
.kui{
  &::before{
    background: #f5222d;
  }
}
</style>
